<template>
    <div>
        <el-dialog title="运费模板" :visible="true" width="600px" :modal-append-to-body="false"
            :close-on-click-modal="false" @close="handleClose">
            <el-form id="forms" ref="forms" :rules="rulesModel" :model="form" label-width="150px">
                <div class="flex" style="padding-top: 10px;" v-for="(item, index) in extaddrList">
                    <el-input v-model="item.addr" type="text" placeholder="请输入地区" />
                    <el-input v-model="item.fee" style="margin-left: 20px;" type="number" placeholder="请输入运费" min="0"
                        @change="item.fee <= 0 ? item.fee = 0 : item.fee" />
                    <template>
                        <el-button @click="extaddrList.splice(index, 1)" type="danger" size="mini" icon="el-icon-minus"
                            round plain style="margin-left: 20px;"></el-button>
                    </template>
                </div>
                <div class="flex" style="margin-top: 10px;">
                    <div style="flex: 1;"></div>
                    <el-button @click="extaddrList.push({ addr: '', fee: '' })" type="primary" size="mini"
                        icon="el-icon-plus" round plain style="margin-left: 20px;"></el-button>
                </div>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button :loading="buttonLoading" type="primary" @click="submit()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { extaddrItem, SetextaddrItem } from "@/api/ctrls.js";
export default {
    data() {
        return {
            form: {}, // 详情实体
            rulesModel: {

            },
            buttonLoading: false,

            extaddrList: [], // 运费模板列表
        }
    },

    mounted() {
        this.getExtaddr();
    },
    methods: {
        /**关闭弹窗 */
        handleClose() {
            this.$parent.modalStatus = 0
        },
        /**表单参数初始化 */
        setForm() {
            this.form = {
                uid: this.info.userid,
                phone: '', // 手机号
            };
        },
        /**（提交） */
        async submit() {
            try {
                try {
                    await this.$refs['forms'].validate()
                } catch (e) {
                    console.log(e)
                    return
                }

                let isff = true;
                this.extaddrList.map(item => {
                    if (item.addr == '') {
                        this.$message({
                            message: "请完善偏远地区及运费",
                            type: "error"
                        });
                        isff = false;
                    }
                });
                if (!isff) {
                    return;
                }

                this.buttonLoading = true;
                const { success, msg } = await SetextaddrItem(this.extaddrList)
                this.buttonLoading = false;
                if (success) {
                    this.handleClose();
                }
                this.$message({
                    message: msg,
                    type: success ? 'success' : 'error'
                })
            } catch (e) {
                // 取消
                console.log(e)
            }
        },
        /**获取偏远地区默认模板 */
        async getExtaddr() {
            const { success, msg, data } = await extaddrItem();
            this.extaddrList = data;
        },
    }
}
</script>

<style lang="scss" scoped>
.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
</style>